<template>
  <div :key="id">
    <ButtonGroup title="文本类型" :status="status[currentStatus]">
      <el-button-group>
        <el-button
          :class="{
            select: currentStatus === 0,
          }"
          :icon="DocumentRemove"
          @click="changeType(0)"
        >
        </el-button>
        <el-button
          :class="{
            select: currentStatus === 1,
          }"
          :icon="Document"
          @click="changeType(1)"
        >
        </el-button>
      </el-button-group>
    </ButtonGroup>
  </div>
</template>

<script setup lang="ts">
import { inject } from 'vue';
import { Document, DocumentRemove } from '@element-plus/icons-vue';
import ButtonGroup from './ButtonGroup/index.vue';
import type { VueComType, UpdateStatus } from '@/types';

const props = defineProps<{
  currentStatus: number;
  status: string[];
  isShow: boolean;
  configKey: string;
  editCom: VueComType;
  id: string;
}>();
const updateStatus = inject<UpdateStatus>('updateStatus');

function changeType(type: number) {
  if (updateStatus) updateStatus(props.configKey, type);
}
</script>

<style scoped></style>
